<script setup>
//推荐页面
import PageHeader from "@/components/PageHeader.vue";
import RecommendContent from "@/components/Recommend/RecommendContent.vue";
import axios from "axios";
import {ref} from "vue";
import RecommendTopic from "@/components/Recommend/RecommendTopic.vue";
import PageFooter from "@/components/PageFooter.vue";

const list = ref([])
const TopicList = ref([])

function getList() {
  axios.get("http://127.0.0.1:8081/art/getList", {
    headers: {token: "getList"}
  }).then(res => {
    console.log(res)
    list.value = res.data;
  }).catch(err => {
    console.log(err)//打印错误信息
  })
}

function getTopicList() {
  axios.get("http://127.0.0.1:8081/topic/getTopicList", {}).then(res => {
    console.log(res)
    TopicList.value = res.data;
  }).catch(err => {
    console.log(err)//打印错误信息
  })
}

const props = {
  t1: "动态",
  t2: "推荐",
  t1Url: {name: 'Dynamical'},
  t2Url: {name: 'Recommend'}
}
getList()
getTopicList()
</script>

<template>
  <PageHeader :t1 = "props.t1" :t2 = "props.t2" :t1Url = "props.t1Url" :t2Url = "props.t2Url" />
  <div class = "container header-top border">
    <div class = "RecommendTopic">
      <div class = "col-2">
        <img class = "col-12" src = "../assets/Recommend/ms.webp" alt = "">
        <p>全部</p>
      </div>
      <div class = "col-2" v-for = "(topicList,index) in TopicList">
        <RecommendTopic :id = "topicList.id" :type = "topicList.type"></RecommendTopic>
      </div>
    </div>
  </div>
  <div class = "border">
    <div v-for = "(list,index) in list" :key = "index">
      <RecommendContent class = "RecommendContent" :title = "list.title" :id = "list.id"
                        :comment-num = "list.commentNum" :user = "list.user" :content = "list.content"
                        :like-count = "list.likeCount" :get-list = "list.getList"></RecommendContent>
    </div>
  </div>
  <PageFooter />
</template>

<script>

</script>
<style scoped>
.header-top {
  margin-top: 60px;
}

.RecommendTopic {
  display: flex;
}

.RecommendTopic > div:first-child {
  margin-left: 0;
}

.RecommendTopic > div:last-child {
  margin-right: 0;
}

.RecommendTopic > div {
  margin: 0 15px;
  text-align: center;

  img {
    height: 60px;
    border-radius: 20px;
  }
}

.RecommendContent {
  margin: 20px 0;
}
</style>